import React from 'react';
import OSSFileSelector from '../../UpAiPersionData/components/OSSFileSelector';
import FilePreview from '../../UpAiPersionData/components/FilePreview';
import { PersonData } from '@/types/aiPerson';

interface MediaFilesFormProps {
  data: PersonData;
  onChange: (data: PersonData) => void;
}

// 媒体文件表单组件
const MediaFilesForm: React.FC<MediaFilesFormProps> = ({ data, onChange }) => {
  
  // 处理表单字段变化
  const handleFieldChange = (field: string, value: any) => {
    onChange({
      ...data,
      [field]: value
    });
  };

  // 删除数组中的文件（用于多选字段）
  const removeFileFromArray = (fieldName: string, urlToRemove: string) => {
    const currentArray = (data as any)[fieldName] as string[];
    const newArray = currentArray.filter((url: string) => url !== urlToRemove);
    handleFieldChange(fieldName, newArray);
  };

  return (
    <div>
      <h3 className="text-xl font-semibold text-gray-800 mb-6 border-b pb-2">媒体文件</h3>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* 图片数组 */}
        <div className="flex flex-col">
          <label className="mb-2 font-medium text-gray-700">图片数组</label>
          <OSSFileSelector
            value={data.images}
            onChange={(value) => handleFieldChange('images', value as string[])}
            multiple={true}
            placeholder="选择图片文件（可多选）"
          />
          <FilePreview
            files={data.images}
            multiple={true}
            onRemove={(url) => removeFileFromArray('images', url)}
          />
        </div>

        {/* 视频数组 */}
        <div className="flex flex-col">
          <label className="mb-2 font-medium text-gray-700">视频数组</label>
          <OSSFileSelector
            value={data.videos}
            onChange={(value) => handleFieldChange('videos', value as string[])}
            multiple={true}
            placeholder="选择视频文件（可多选）"
          />
          <FilePreview
            files={data.videos}
            multiple={true}
            onRemove={(url) => removeFileFromArray('videos', url)}
          />
        </div>
      </div>
    </div>
  );
};

export default MediaFilesForm;